<template>
	<u-skeleton v-if="!props.msg" rows="19" :animate="true" avatar title></u-skeleton>
	<view v-else class="wrap">
		<u-list>
			<u-list-item class="itemlist" v-for="item in props.msg">
				<view class="header">
					<view class="head-l">
						<u-avatar class="avatar">
							<image :src="item.user_id[0].ava" mode=""></image>
						</u-avatar>
						<view class="name">
							{{item.user_id[0].nickname?item.user_id[0].nickname:item.user_id[0].username}}
						</view>
						<view class="time">
							<uni-dateformat :date="item.publish_date" format="MM-dd"></uni-dateformat>
						</view>
					</view>
					<view class="head-r">
						<view class="iconfont icon-elipsis" @click="showAction(item.user_id[0]._id)"
							style="font-size: 30px;"></view>

					</view>
				</view>
				<view class="content">
					<view class="title" @click="godetail(item)">{{item.title}}</view>
					<view class="int">{{item.content}}</view>
					<view class="pic">
						<image v-for="data in item.imageValue" :src="data"></image>
					</view>
				</view>
				<view class="footer">
					<view class="view">
						<view class="size iconfont icon-browse"></view>
						<view style="font-size: 13px;">{{item.view_count}}</view>
					</view>
					<view class="com">
						<view class="size iconfont icon-xiaoxi-zhihui"></view>
						<view style="font-size: 13px;">{{item.comment_count}}</view>
					</view>
					<view class="like">
						<view class="size iconfont icon-favorite"></view>
						<view style="font-size: 13px;">{{item.like_count}}</view>
					</view>
				</view>
			</u-list-item>
		</u-list>

	</view>
	<u-action-sheet :actions="list" :title="title" :show="show" @close="show = false" :closeOnClickOverlay="true"
		:closeOnClickAction="true" @select="selectClick($event)"></u-action-sheet>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
	import { useStore } from '../../stores/store';
	let list = reactive([{
			name: '修改'
		},
		{
			name: '删除',
			disabled: false
		}
	])
	let currentid = ref()
	let title = '编辑文章'
	let show = ref(false)
	const store = useStore()
	let loading = ref(true)
	const props = defineProps({
		msg: {
			type: Array
		}
	})
	const showAction = (id) => {
		currentid.value = id
		show.value = true
		//当前文章作者才能删除
		let role = uniCloud.getCurrentUserInfo().role[0]
		let uid = uniCloud.getCurrentUserInfo().uid
		console.log(currentid.value, uid);
		// if (uid != currentid.value) {
		// 	list[1].disabled = true
		// }
		console.log(role);
		//管理员和超级管理员删除权限
		if (role === 'admin' || role === 'webadmin' || uid == currentid) {
			list[1].disabled = false
		}
	}
	const selectClick = (i) => {

		console.log(i);
	}
	//跳转详情页
	const godetail = (item) => {
		store.detailsave(item)
		uni.navigateTo({
			url: `/pages/detail/detail?id=${item._id}`
		})
	}
	onLoad(() => {
		// let role = uniCloud.getCurrentUserInfo().role[0]
		// console.log(role);

	})
</script>

<style scoped lang='scss'>
	.wrap {
		background-color: #eee;

		.itemlist {
			background-color: #fff;
			margin-bottom: 10px;
		}

		.itemlist:first-child {
			margin-top: 10px;
		}
	}

	.size {
		font-size: 20px;
		margin-right: 10px;
	}


	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10px;
		margin-left: 10px;

		.head-l {
			display: flex;
			flex-direction: row;
			align-items: center;



			.avatar,
			.name,
			.time {
				margin-right: 20px;
			}

			.avatar {
				width: 35px;
				height: 35px;
				margin-right: 5px;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
	}

	.content {
		padding: 10px;

		.title {
			height: 60px;
			width: 100%;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.int {
			height: 40px;
			width: 100%;
			margin-bottom: 10px;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.pic {
			image {
				width: 100px;
				height: 100px;
				margin-left: 10px;
				border-radius: 10px;
			}
		}
	}

	.footer {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.view,
		.com,
		.like {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
</style>